NaN

第3节 运算符和数据类型转换

(一) if else 语句

if else用来表示中文里的 如果..., 就...., 否则.....

// 条件为true, 执行if后面的括号代码, 否则执行 else 后面括号代码
if(条件) {
	// todo
}else{
	// todo
}

// 多重判断
if(){

} else if() {

} else {

}

具体例子

<script>
   var a = 100;
   var b = 20;
   debugger;
   if (a > b) {
      console.log('a 大于 b');
   } else {
      console.log('a 小于 b');
   } 
</script>

<!-- 多重判断 -->
<script>
   var gender = prompt('请输入性别');
   if (gender === '男') {
      alert('你是个男的');
   } else if(gender === '女') {
      alert('你是个妹子');
   } else {
      alert('性别未知');
   }
</script>

(二) 类型转换

【腾讯文档】05-类型转换-备课

问题: 以下代码会打印什么

<script>
   var a = 'aa';
   var b = 'bb';
   if (a+b) {
      console.log('xxxxxxx');
   } else {
      console.log('yyyyyyyy');
   } 
</script>

(1) 显式转换

  1. Number(变量名) 将其它类型转为数字
  2. String(变量名); 转字符串 // 另一种转换方式: 变量名+""
  3. Boolean(变量名); // 另一种转换方式 !!变量名
<script>
   var str = '123';
   // 转换为数字
   var num = Number(str);
   console.log(num);
   console.log(typeof num);

   // 结果为NaN
   var str2 = 'abcd';
   var num2 = Number(str2);
   console.log(num2);

   var str3 = '';
   var num3 = Number(str3);
   console.log(num3); 
</script>

(2) 隐式转换 

<script>
   var a = 'aa';
   var b = 'bb';
    // a+b => aabb aabb会自动转换为true, 所以执行结果为 xxxxxx
   if (a+b) {
      console.log('xxxxxxx');
   } else {
      console.log('yyyyyyyy');
   } 
</script>

(3) 数据类型转换规则

【腾讯文档】类型转换规则 https://docs.qq.com/mind/DV21sVWRSUHJvUkZX

01 其他类型转数字类型规则 

<script>
   var boo1 = true;
   var boo2 = false;
   console.log('布尔true',Number(boo1));  
   console.log('布尔false',Number(boo2));  

   var str = '';
   var str1 = ' ';
   var str2 = '123'; 
   var str3 = 'abcd123';

   console.log('空字符串',Number(str));   
   console.log('空字符串',Number(str1));   
   console.log('数字字符串',Number(str2));    
   console.log('非数字字符串',Number(str3));  

   var uu;
   console.log('undefined',Number(uu));   

   var obj = null;
   console.log('null',Number(null));    

   var obj1 = {};
   var obj2 = {a:2,b:3};
   console.log('空对象',Number(obj1));   
   console.log('非空对象',Number(obj2));  
</script>

02 其他类型转布尔规则

  • Boolean(变量名)
  • !!变量
<script>
   var num1 = 100;
   var num2 = NaN;
   var num3 = 0;
   var num4 = Infinity;
   var num5 = 88.88;
   console.log('整数',!!num1);    
   console.log('NaN',!!num2);   
   console.log('0',!!num3);    
   console.log('无穷大',!!num4); 
   console.log('小数',!!num5);  

   var str = '';
   var str1 = '  ';
   var str2 = 'abcd';
   console.log('空字符串',!!str);   
   console.log('空字符串多个空格',!!str1);   
   console.log('非空字符串',!!str2);  

   var uu;
   var nu = null;
   console.log('undefined',!!uu);  
   console.log('null',!!nu);   

   var obj = {};
   console.log('object',!!obj);
</script>

03 其他类型转字符串规则

  • String(变量名);
  • 变量名 + ""
  • 规律: 一般情况下, 其他类型转字符串都是直接给原来的变量加上双引号即可
var num = 100;
console.log("数字",num+'');

(三) 运算符

【腾讯文档】js运算符思维导图 https://docs.qq.com/mind/DV0NCdHpCZmJVRGxX

(1) 算术运算

  1. + - * / %
  2. 相加的时候, 有一个数为字符串, 则+表示字符串拼接
<script>
    var a = 20;
    var b = 7;
    var num1 = a+b;
    var num2 = a-b;
    var num3 = a*b;
    var num4 = a/b;
    // 计算余数
    var num5 = a % b; 
    console.log(num1);
    console.log(num2);
    console.log(num3);
    console.log(num4);
    console.log(num5); 
</script> 

<script>
  // 有一个数为字符串, 则+表示字符串拼接  
  var a = 100;
  var b = prompt('请输入数字');
  console.log(typeof b);
  console.log(a+Number(b));
</script>

(2) 关系运算符(比较运算符) 

var a = 10;
var b = '10';
console.log(a == b); // true,类型不同, 先转换成相同类型
console.log(a === b); // false, 类型不同为false, 类型相同再判断值是否相同

(3) 逻辑运算符

  1. 逻辑非!, 取反即可

    var boo1 = false;  // !boo1 => true  !!bool 
var num = 100;	//  !num => false
var str = ''; // 	!str => true
var obj = null; // !obj => true
var username; // !username => true

// 如果str为空, 则打印111,否则打印222
var str = '';
if(str === '') {
	console.log(111);
} else {
	console.log(222);
}
// 以上写法,可以换成下面的写法
if (!str) {
	console.log(111);
} else {
	console.log(222);
} 

var num = 100;
if (num) {
	console.log(111);
} else {
	console.log(222);
}
// 以上写法, 一般会写成
if(!!num) {
    console.log(111);
} else {
    console.log(222);
}

  2. 逻辑与&&:  中文里并且的意思

    规律: 前者为true取后者, 否则取前者

    当都是布尔的时候, 只有当两者都为true时结果为true, 否则为false

// 计算以下式子的值(参与运算的都是布尔类型)
true && true => 
true && false => 
false && true => 
false && false =>   

// 计算以下式子的值(参与运算的是其他类型)
var num1 = 100;
var num2 = 0;
num1 && num2 => 100
num2 && num1 => 0

var a = 'web';
var b; 
a && c =>  // 报错,计算的结果为c, 而c没有声明
b && c =>

  1. 逻辑或|| : 中文里的或者的意思

    规律: 前者为true取前者, 否则取后者

    当都是布尔的时候, 只要有一个为true, 结果皆为true, 否则为false

<script>
console.log(true || true );  // true
console.log(true || false );  // true
console.log(false || true ); // true
console.log(false || false ); // false


 var num1 = 100;
var num2 = 0;
console.log(num1 || num2 );  // 100
console.log(num2 || num1 );  // 100

var a = 'web';
var b; 
console.log(a || c );  // web
console.log(b || c ); // 报错,计算的结果为c, 而c没有声明
</script>

(4) 一元运算符

  • i++ i先运算, 运算结束后i自加1
  • ++i i先自己加1, 再跟其它数相加
<!-- ++ 自加 -->
<script>
var i = 10;
var j = 20;

var i2 = 10 + i++;   // i先运算在自加1
console.log('i2',i2); // 20
console.log('i',i); // 11

var j2 = 10 + ++j; // j先自加1再运算
console.log('j2',j2); // 31
console.log('j',j);  // 21 
</script>

自减运算, 道理类似自加运算

<script>
var i = 10;
var j = 20;

var i2 = 10 + i--;   // i先运算在自减1
console.log('i2',i2); //  20
console.log('i',i); //  9

var j2 = 10 + --j; // j先自减1再运算
console.log('j2',j2); //  29
console.log('j',j);  //  19
</script>

练习:

<!-- 练习1 -->
<script>
var i = 10; 
var i2 = 10 + i++; // i=10 i2=20
var i3 = 10+ ++i; // i=12 i3=22
var i4 = 10 + i--; // i=12 i4=22   
var i5 = 10 + --i;  // i =10 i5=20   
// 求i,i2,i3,i4,i5的值
console.log(i,i2,i3,i4,i5);


var count = 60; // 说出控制台打印的值
console.log(--count);  // 59
console.log(--count);  // 58
console.log(--count);
console.log(--count);
console.log(--count); 
</script>

<!-- 练习2 -->    
<script>
var i = 1;
var j = 1;
var a = 10;
// 11   10+ 1
var b = a + i++;
//     11+  3   + 3   + 2
var c = b + ++i + i++ + ++j;
var d = a + b + c;
// i=4 j=2 a=10,b=11, c=19 d=40
console.log(i,j,a,b,c,d); 
</script>

(5) 复合赋值运算符 

<script>
var a = 10;
a += 10;  
console.log(a); // 20
a -= 10;
console.log(a); // 10
a *= 10;
console.log(a); // 100
a /= 10;
console.log(a); // 10
a %= 10;
console.log(a); // 0 
</script>

(6) 运算符优先级 

() > 自加(自减) > 算术 > 关系 > 逻辑 > 赋值

(四) 作业

(1) 编程题

  1. 编程题:
有以下两个变量 num1 和 num2,若两个变量相加等于 15.3,则输出'运算正确',否则输出'运算错误'
var num1 = 7.1;
var num2 = 8.2; 

答:

  1. 编程题, 运算并打印结果 有一篮苹果，两个两个的拿剩一个，三个三个的拿剩一个，四个四个的拿剩一个，五个五个的拿剩一个，六个六个的拿剩一个，七个七个的拿，能拿完，请问这篮子里有多少个苹果？

  2. 写出下面式子的值

typeof 100    
typeof true       
typeof(undefined)    
typeof({})          
typeof( [1,2] )    
typeof(NaN)        
typeof(null)
  1. 编程题: 多重判断 作业要求: 在屏幕输入一个数字,确定后弹出相应的年龄段
年龄划分:		 
“0-6岁为婴幼儿；  
7-12岁为少儿；
13-17岁为青少年；
18-45岁为青壮年；
46-69岁为中年；
69岁以上为老年
  1. 实现下面效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  	<p>
    	显示一个弹框, 用户输入输入大于20或者小于10的数字就弹出'你猜对了', 否则弹出'你猜错了'  
  	</p>
  
   
</body>
</html>

  1. 实现类似购物车的编辑效果 购物车地址: http://fresh.huruqing.cn/cart

    <!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
      .dsn {
         display: none;
      }
   </style>
</head>
<body>
   <button id="btn1" onclick="clickFn()">编辑</button>
   <div>
      <span id="num">x1</span>
      <div id="num2" class="dsn">
         <button>+</button>
         <span>1</span>
         <button>-</button>
      </div>
   </div>
   <button id="count">结算</button>

   
</body>
</html>

(2) 运算符作业

1. 计算以下式子的值(先口算, 再验证) 

1. var num1 = 0;
   !num1;   
2. var num2 = 100;
   !num2;   
   !!num2;  
3. var num3 = NaN;
   !num3;   
4. var str1 = '';
   !str1;   
5. var str2 = 'abc';
   !str2;   
   

10. 0 && 100;   
11. 0 && NaN;   
12. 100 && 0;  
13. 100 && NaN;  
14. NaN && 0;  
15. NaN && 100;  

16. '' && 'abc';   
17. 'abc' && '';   
18. 'abc' && '456';  

19. true && true;   
20. true && false;  
21. false && true;  
22. false && false;  

23. 0 && undefined;  
24. NaN && null;  
25. 100 && 'abc';  

6. var boo1 = true;
   !boo1;   
7. var boo2 = false;
   !boo2;  
8. var name;
   !name;  
9. var cat = null;
   !cat;  
   
var obj;
27. 'abc' && obj.name;   
28. undefined && obj.name;   
29. obj && obj.name; 

30. 0 || 100;  
31. 0 || NaN; 
32. 100 || 0; 
33. 100 || NaN; 
34. NaN || 0; 
35. NaN || 100;  

36. '' || 'abc';  
37. 'abc' || '';  
38. 'abc' || '456'; 

39. true || true; 
40. true || false; 
41. false || true; 
42. false || false; 

43. 0 || undefined; 
44. NaN || null;  
45. 100 || 'abc';  
46. 'abc' || undefined 

47. var obj;   'abc' || obj.name;  
48. undefined || obj.name;  

'1.23' == 1.23 
0 == false  
null == undefined  
NaN == NaN  
1 == '1'       
1 === '1'       
1 + '2' === '1' + 2  
1 + true === false + 2 
1 + null == undefined + 1 
'a' - 'b' == 'b' - 'a' false
4 == '4.00' 
4 === '4.00' 
0 == false  
0 == null 
null == false 


加减作业题
var score = 50;
var grade = '7';
score + 10;     
score + '10';    
score + null;     
score + undefined; 
score + NaN;              
score + 10;
score + '10';
score + null;
var num1 = 8;       
var num2 = '8';
num1 - num2;              
num1 - 'web01';             
num1 - null;              
num1 - undefined;          
num1 - true;             
num1 - false;             
num1 - num2;

2. 计算以下式子的值, 写出解题步骤 

<script>
    // () > 自加(自减) > 算术 > 关系 > 逻辑 > 赋值
    var i = 1;
    var j = 1;
    var sum = 20 + i++ + 'abc' && 123 - ++i + ++j + ++j + '123' == 123 * 2/4;
  
  
</script>

3. 自学for循环

  1. 完成上面的编程题

    运算并在网页上打印结果 有一篮苹果，两个两个的拿剩一个，三个三个的拿剩一个，四个四个的拿剩一个，五个五个的拿剩一个，六个六个的拿剩一个，七个七个的拿，能拿完，请问这篮子里有多少个苹果？

  2. 使用for循环计算1~100相加结果